<template>
  <div>
    <textarea
      placeholder="请输入要评论的内容（最多120字）"
      maxlength="120"
      v-model="msg"
      ref="commentRef"
    ></textarea>
    <mt-button type="primary" size="large" @click="postMsg">发表评论</mt-button>

    <!-- 评论列表区 -->
    <div class="cmt-list">
      <div class="cmt-item" v-for="(item, i) in cmtlist" :key="i">
        <div class="cmt-item-title">
          第{{ i + 1 }}楼&nbsp;&nbsp;用户:{{
            item.username
          }}&nbsp;&nbsp;发表时间:{{ item.add_time | dataFormat }}
        </div>
        <div class="cmt-item-body">{{ item.content }}</div>
      </div>
    </div>

    <mt-button
      type="danger"
      size="large"
      plain
      @click="loadMore"
      v-if="finished"
      >加载更多</mt-button
    >
    <div class="no-data" v-else>没有更多数据了</div>
  </div>
</template>

<script>
// 按需从MintUI中，导入需要的弹框
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      username: "", //昵称
      page: 1, //默认展示第一页的评论
      cmtlist: [],
      msg: "", //即将发表的评论内容
      listNum: 10, //展示的评论数
      finished: true, //显示加载更多
    };
  },
  props: ["work_id", "type", "work_title"], //接收父组件传递的ID,type
  created() {
    if (localStorage.getItem("UserInfo")) {
      this.username = window.JSON.parse(
        localStorage.getItem("UserInfo")
      ).username;
    }
  },
  activated() {
    this.cmtlist = [];
    this.listNum = 10;
    this.finished = true;
    this.getCommentByPage();
  },
  methods: {
    getCommentByPage() {
      this.cmtlist = [];
      this.$http
        .get("/getComments", {
          params: {
            work_id: this.work_id,
            type: this.type,
          },
        })
        .then((res) => {
          if (res.data.errcode === 200) {
            let data = res.data.message;
            let showData = [];
            if (data.length > this.listNum) {
              showData = data.slice(data.length - this.listNum, data.length);
              this.finished = true;
            } else {
              showData = data;
              this.finished = false;
            }
            if (this.listNum > showData.length) {
              this.finished = false;
            }
            showData.forEach((item) => {
              // //   将下一页的数据追加在上一页后面
              this.cmtlist.unshift(item);
            });
          } else {
            this.cmtlist = [];
          }
        });
    },
    loadMore() {
      //点击按钮加载更多评论
      this.listNum += 10;
      this.getCommentByPage();
    },
    postMsg() {
      if (this.msg.trim().length <= 0) return Toast("请输入评论内容！！！");
      let identity = localStorage.getItem("identityResult");
      if (identity == 1) {
        this.msg = "";
        return Toast("登录以后才能够评论！！！");
      }
      let params = {
        username: this.username,
        content: this.msg.trim(),
        work_id: this.work_id,
        work_title: this.work_title,
        type: this.type,
      };
      this.$http.post("/postComment", params).then((res) => {
        if (res.data.errcode === 200) {
          // 手动拼接出一个评论的对象，并把它unshift到‘cmtlist’中
          this.cmtlist.unshift({
            username: this.username,
            add_time: new Date(),
            content: this.msg.trim(),
          });
          this.msg = "";
        } else {
          Toast("不能发布!!!");
        }
      });
    },
    focusComment() {
      this.$refs.commentRef.focus();
    },
  },
};
</script>

<style lang="scss" scoped>
textarea {
  font-size: 14px;
  margin: 0;
}
.cmt-list {
  margin-top: 4px;
  .cmt-item {
    line-height: 30px;
    .cmt-item-title {
      font-size: 14px;
      background-color: #ddd;
    }
    .cmt-item-body {
      font-size: 13px;
      text-indent: 2em;
    }
  }
}
.no-data {
  width: 100%;
  height: 30px;
  text-align: center;
  font-size: 14px;
  color: grey;
  margin-top: 20px;
}
</style>